<template>
  <div class="page-mobile_distribution">
    <div :class="['header-top',scroll > 0 ?'active':'']">
      <div class="header_left" @click="$router.back()">
        <van-icon name="arrow-left" style="margin-left:.2rem;" />
      </div>
      <div class="center_title">分销中心</div>
      <div class="header_right" @touchstart="toPath('/m/distribution-explain')">
        <img src="/img/mobile/distribution_explain.png" alt="">
        <span>分销说明</span>
      </div>
    </div>
    <div class="user-d-h">
      <div class="my-profit">
        <img src="/img/mobile/distribution_profit.png" alt="">
        <span>我的收益</span>
      </div>
      <div class="total-amount">
        <div class="amount-name">总金额(元)</div>
        <div class="amount-money">{{distribution_info.profit ? distribution_info.profit.toFixed(2) : "0.00"}}</div>
        <div class="withdrawal" @touchstart="toPath('/m/withdrawal')">
          <span>立即提现</span>
          <img src="/img/mobile/white-right-icon.png" alt="">
        </div>
      </div>
      <div class="profit-list">
        <div class="profit-item">
          <div class="profit-name">可提现金额</div>
          <div class="profit-money">￥<span>{{distribution_info.profit ? (distribution_info.profit-distribution_info.freezeMoney).toFixed(2) : "0.00"}}</span></div>
        </div>
        <div class="inline"></div>
        <div class="profit-item">
          <div class="profit-name">未到账金额</div>
          <div class="profit-money">￥<span>{{distribution_info.freezeMoney ? distribution_info.freezeMoney.toFixed(2) : "0.00"}}</span></div>
        </div>
        <div class="inline"></div>
        <div class="profit-item">
          <div class="profit-name">已提现金额</div>
          <div class="profit-money">￥<span>{{distribution_info.oldWithdrawal ? distribution_info.oldWithdrawal.toFixed(2) : "0.00"}}</span></div>
        </div>
      </div>
    </div>
    <div class="distribution-content">
      <div class="menu-list">
        <div class="menu-item" @touchstart="toPath('/m/poster')">
          <img src="/img/mobile/distribution_material.png" alt="">
          <div class="menu-name">推广素材</div>
        </div>
        <div class="menu-item" @touchstart="toPath('/m/my-team')">
          <img src="/img/mobile/distribution_me.png" alt="">
          <div class="menu-name">我的推广</div>
        </div>
        <div class="menu-item" @touchstart="toPath('/m/distribution-order')">
          <img src="/img/mobile/distribution_order.png" alt="">
          <div class="menu-name">分销订单</div>
        </div>
      </div>
      <div class="extension">
        <div class="extension-title">
          <div class="wen">?</div>
          <div>如何推广</div>
        </div>
        <div class="poster-swiper">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#5c98ff">
            <van-swipe-item>
              <img src="/img/mobile/swiper_01.png" alt="">
            </van-swipe-item>
            <van-swipe-item>
              <img src="/img/mobile/swiper_02.png" alt="">
            </van-swipe-item>
            <van-swipe-item>
              <img src="/img/mobile/swiper_03.png" alt="">
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="poster-btn" @touchstart="toPath('/m/poster')">分享赚钱&nbsp;&nbsp;&nbsp;下单立得</div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getNotice } from "~/api/index";
import { getDistributionInfo } from "~/api/distribution";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  scrollToTop: true,
  data() {
    return {
      distribution_info: {},
      scroll:0,
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      is_loading(state) {
        return state.is_loading;
      },
    }),
  },
  watch: {},
  activated() {
    if (!this.token && Object.keys(this.user_info).length == 0) {
        this.$router.replace("/m/login");
        return;
      }
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
    this.getData();
    this.getDistributionInfo();
  },
  deactivated() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  destroyed() {
    if (process.client) {
      window.removeEventListener("scroll", this.eventListener);
    }
  },
  created() {
    // if (this.actived) {
    //   this.active = this.actived;
    // } else {
    //   this.active = "notification";
    //   this.handleChange("notification");
    // }
    if (!this.token && Object.keys(this.user_info).length == 0) {
      this.$router.replace("/m/login");
      return;
    }
    this.getData();
    this.getDistributionInfo();
    
  },
  mounted() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING"]),
    handleTips(){
      this.$toast(this.distribution_info.freezeDay+"天内获得的分销订单金额！");
    },
    toPath(path) {
      this.$router.push(path);
    },
    // handleChange(name) {
    //   this.$router.replace({
    //     path: "/m/notice",
    //     query: {
    //       actived: name
    //     }
    //   });
    //   this.active = name;
    //   this.page = 1;
    //   this.getData();
    // },
    throttle(fn, delay) {
      let lastTime = 0;
      return !(function () {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      })();
    },
    pullUp() {
      //   // 滚动条离顶部的距离
      //   let scrollTop =
      //     document.documentElement.scrollTop || document.body.scrollTop;
      //   // 窗口可视区域高度
      //   let clientHeight =
      //     document.documentElement.clientHeight || document.body.clientHeight;
      //   // 滚动区域高度
      //   let scrollHeight =
      //     document.documentElement.scrollHeight || document.body.scrollHeight;
      //   // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
      //   if (scrollTop + clientHeight >= scrollHeight) {
      //     console.log("上拉加载");
      //     if (this.total <= this.notice_list.length) {
      //       return;
      //     }
      //     if (this.is_loading) {
      //       return;
      //     }
      //     this.page++;
      //     this.getData("pullup");
      //   }
    },
    eventListener() {
      this.throttle(this.pullUp, 300);
    },
    async getDistributionInfo() {
        this.SET_IS_LOADING(true);
      let params = {
        userId: this.user_info.id,
      };
      let result = await getDistributionInfo(params);
      if (result && result.data && result.data.code == 200) {
        this.distribution_info = result.data.data;
        this.SET_IS_LOADING(false);
      } else {
        // this.$Message.error("获取失败！");
        this.$toast("获取失败！");
        this.SET_IS_LOADING(false);
      }
    },
    async getData(fetch_type) {
      //   this.SET_IS_LOADING(true);
      //   let result = await getNotice({
      //     sort: "id",
      //     sortType: "desc",
      //     offset: this.pageSize * (this.page - 1),
      //     limit: this.pageSize,
      //     isOpen: 1,
      //     type:
      //       this.active && this.active == "notification"
      //         ? 1
      //         : this.active && this.active == "notice"
      //         ? 2
      //         : 1
      //   });
      //   if (result && result.data.code == 200) {
      //     if (fetch_type == "pullup") {
      //       this.notice_list = [...this.notice_list, ...result.data.data.rows];
      //     } else {
      //       this.notice_list = result.data.data.rows;
      //     }
      //     this.total = result.data.data.total;
      //     this.SET_IS_LOADING(false);
      //   } else {
      //     this.SET_IS_LOADING(false);
      //     this.$toast("获取失败！");
      //   }
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.page-mobile_distribution {
  background-color: #f0f2f9;
  width: 7.2rem;
  min-height: 100vh;
  .header-top {
    width: 7.2rem;
    height: 0.9rem;
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
    line-height: 0.9rem;
    display: flex;
    align-items: center;
    box-shadow: none;
    background-color: var(--theme-color);
    .header_left {
      width: 20%;
      color: #ffffff;
      font-size: 0.35rem;
      display: flex;
      align-items: center;
    }
    .center_title {
      width: 60%;
      text-align: center;
      font-size: 0.3456rem;
      color: #ffffff;
      font-weight: bold;
    }
    .header_right {
      width: 20%;
      display: flex;
      align-items: center;
      color: #ffffff;
      img {
        // margin: 0 auto;
        display: block;
        width: .2496rem;
        height: .2496rem;
        margin-right: .1rem;
      }
    }
  }
  .header-top.active{
    background: var(--theme-color);
  }
  .user-d-h{
    padding-top: 1rem;
    width: 7.2rem;
    height: 5.184rem;
    background: var(--theme-color);
    .my-profit{
      margin-left: .288rem;
      color: #ffffff;
      display: flex;
      align-items: center;
      font-size: .3072rem;
      font-weight: bold;
      img{
        width: .31679rem;
        height: .31679rem;
        display: block;
        margin-right: .1rem;
      }
    }
    .total-amount{
      margin: .4rem 0 .3rem 0;
      text-align: center;
      position: relative;
      .amount-name{
        font-size: .288rem;
        font-weight: bold;
        color: #ffffff;
        margin-bottom: .2rem;
      }
      .amount-money{
        font-size: .6144rem;
        // font-weight: bold;
        color: #ffffff;
      }
      .withdrawal{
        position: absolute;
        right: .288rem;
        bottom: .2rem;
        color: #ffffff;
        font-size: .2112rem;
        display: flex;
        align-items: center;
        img{
          width: .144rem;
          height: .17279rem;
          display: block;
          margin-left: .05rem;
        }
      }
    }
    .profit-list{
      width: 6.624rem;
      height: 1rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
      .inline{
        width: 1px;
        height: 60%;
        background-color: #ffffff;
      }
      .profit-item{
        text-align: center;
        width: 33%;
        height: 80%;
        line-height: .4rem;
        // vertical-align:middle;
        .profit-name{
          font-size: .2304rem;
          // line-height: .3rem;
        }
        .profit-money{
          span{
            font-size: .3264rem;
          }
        }
      }
    }
  }
  .distribution-content{
    width: 6.624rem;
    // height: 1rem;
    border-top-right-radius: .192rem;
    border-top-left-radius: .192rem;
    background-color: #ffffff;
    margin: -.5rem auto 0;
    padding: .288rem;
    box-sizing: border-box;
    .menu-list{
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 1.5rem;
      border-bottom: 1px solid #dcdfe6;
      .menu-item{
        width: 33.3333%;
        height: 1.2rem;
        img{
          width: .5952rem;
          height: .5952rem;
          display: block;
          margin: .1rem auto;
          background-color: var(--theme-color);
        }
        .menu-name{
          text-align: center;
          color: #3b3c3d;
          line-height: .5rem;
          font-size: .288rem;
        }
      }
    }
    .extension{
      width: 100%;
      padding: .288rem 0;
      .extension-title{
        font-size: .3072rem;
        font-weight: bold;
        color: #3b3c3d;
        display: flex;
        .wen{
          width: .3264rem;
          height: .3264rem;
          background: var(--theme-color);
          border-radius: 50%;
          line-height: .3264rem;
          text-align: center;
          color: #ffffff;
          font-size: .26rem;
          margin-right: .1rem;
        }
      }
      .poster-swiper{
        width: 4.8rem;
        height: 6.816rem;
        margin: .288rem auto;
        img{
          width: 4.8rem;
          height: 6.816rem;
          display: block;
        }
      }
      .poster-btn{
        margin-top: .5rem;
        width: 100%;
        height: .8448rem;
        border-radius: .4224rem;
        text-align: center;
        color: #ffffff;
        line-height: .8448rem;
        font-size: .3072rem;
        background-color: var(--theme-color);
      }
    }
  }
}
</style>
